// 判断本地是否有token
// 没有token的时候
if (localStorage.getItem("token") == null) {
  location.href = "/login.html"
}

//引入layui
layui.use(['layer'], function () {
  let layer = layui.layer;


  //添加待办事项
  $(".new-todo").on("keydown", function (e) {
    //  2.键盘码：事件对象。e.keyCode
    //  3.当13的时候特别对待
    if (e.keyCode == 13) {

      let val = $(".new-todo").val();
      //内容不能为空
      if (val == '') {
        layer.msg('计划不能为空');
        return;
      }

      $.ajax({
        url: '/todo/add',
        type: 'POST',
        data: {
          content: val,
          isdone: 0, //-----默认没有完成
        },
        success: function (res) {
          layer.msg(res.message);

          if (res.status == 0) {
            //先清空列表
            $('.new-todo').val('');
            //显示列表
            list();
          }
        }
      })
    }
  });


  //列表显示
  function list() {
    $.ajax({
      url: '/todo/list',
      success: function (res) {

        if (status == 0) {
          let str = '';

          // console.log(res.data);
          res.data.forEach(ele => {
            str += `<li class=${ele.isdone?'completed':""}>
            <div class="view">
              <input class='toggle' type="checkbox" ${ele.isdone?'checked':''} _id=${ele.id} _isdone=${ele.isdone}>
              <label>${ele.content}</label>
              <button class="destroy" _id=${ele.id}></button>
            </div>
            <input class="edit" value="Create a TodoMVC template" _id=${ele.id}>
          </li>`
          });
          $('ul').html(str);
        }
      }
    })
  }
  list();

  // 需求：用户对x 点击chick后，有li消失
  //    1. 给x添加点击：不能直接添加！(给父级添加委托)
  $("ul").on("click", ".destroy", function () {

    //获取要被删除的内容id
    let id = $(this).attr('_id');
    $.ajax({
      url: '/todo/del/' + id,
      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {
          list();
        }
      }
    })

  });




  // 需求：用户对 圈 点击click后，样式改变！
  $("ul").on("click", ".toggle", function () {

    let id = $(this).attr('_id');
    let isdone = $(this).attr('_isdone') == 1 ? 0 : 1
    $.ajax({
      type: 'POST',
      url: '/todo/edit',
      data: {
        id,
        isdone
      },
      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {
          list();
        }
      }
    })

    $(this).parents("li").toggleClass("completed");
  });


  // 需求：用户对 中间文字 双击 ，当前整个li添加一个样式 editng
  // 中间文字----->跑到了新出来input

  $("ul").on("dblclick", "label", function () {
    // 1.给父级添加类名
    $(this).parents("li").addClass("editing");


    // 2.中间文字  新出来input
    let str = $(this).text();

    // 3.找父级下一个兄弟   
    $(this).parent().next().val(str);

  });

  $("ul").on("blur", ".edit", function () {
    // 1.li去掉样式
    $(this).parent().removeClass("editing");
    let id = $(this).attr('_id');
    let val = $(this).val();

    $.ajax({
      type: 'POST',
      url: '/todo/edit',
      data: {
        id: id,
        content: val
      },
      success: function (res) {

        layer.msg(res.message);
        if (res.status == 0) {
          list();
        }
      }
    })

  });

});